<template>
    <h3>这是vue页面12312345</h3>
    <div>tab切换</div>

    <div class="box">
        <div 
            v-for="(item, index) in list" 
            :key="item.id" 
            :class="{active: activeIndex === index}"
            @click="handClick(index)"
        >{{ item.title }}</div>
        <!-- <div class="active">1111</div>
        <div>22222</div>
        <div>33333</div> -->
    </div>
    <p>{{ list[activeIndex].content }}</p>
</template>

<script>
    export default {
        data() {
            return {
                list: [
                    {
                        id: 1,
                        title: '标题一',
                        content: '内容一'
                    },
                    {
                        id: 2,
                        title: '标题二',
                        content: '内容二'
                    },
                    {
                        id: 3,
                        title: '标题三',
                        content: '内容三'
                    },
                    {
                        id: 4,
                        title: '标题四',
                        content: '内容四'
                    },
                ],
                activeIndex: 0,
            }
        },
        methods: {
            handClick(index) {
                this.activeIndex = index;
            }
        }
    }



</script>

<style lang="scss">
    h3{
        color: red;
    }

    .box{
        display: flex;

        >div{
            width: 150px;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        
        .active{
            color: red;
            font-weight: bold;
        }
    }
</style>